<template>
	<view class="home-container">

		<!-- 搜索框 -->
		<view class="search-box">
			<uv-search
				placeholder="搜索课程和话术"
				v-model="searchValue"
				:showAction="false"
				bgColor="#f8f9fe"
				height="80rpx"
				borderRadius="40rpx"
				box-shadow="0px 0px 20px rgba(60, 128, 209, 0.1)"
			/>
		</view>

		<!-- 顶部导航栏 -->
		<!-- <uv-navbar :border="false" title="首页" fixed></uv-navbar> -->
		<uv-tabs
			:list="tabList"
			:current="currentTab"
			@change="onTabChange"
			lineColor="#3c9cff"
			activeStyle="color:#3c9cff;font-weight:bold;"
			style="margin-top: 10rpx;"
		></uv-tabs>
		
       
	   <view v-if="tabContent.length">
	   	<template v-for="(module, idx) in tabContent[currentTab]?.modules" :key="idx" >
			

			<!-- <BannerIconDemo
				v-if="module.template_code === 'banner_1'"
				:list="menuArr2" 
				:menuBaseUrl="menuBaseUrl"
				:title="module.module_name" 
			/>   -->

			
			<TmpBannerIcon
				v-if="module.template_code === 'banner_1'"
				:list="module.module_detail" 
				:menuBaseUrl="menuBaseUrl"
				:title="module.module_name" 
			/>
			
			<!-- <template v-for="(moduleitem, idxm) in module.module_detail" :key="idxm">
				<Banner1
				v-if="module.template_code === 'banner_1'"
				:list="moduleitem" 
				:menuBaseUrl="menuBaseUrl"
				:title="module.module_name" 
				/>
			</template> -->
			
	   		<TmpCategoryModule1
	   			v-if="module.template_code === 'category_1'"
	   			:list="module.module_detail" 
	   			:title="module.module_name" 
	   			:colorData="yellow"
	   		/>

	   		<Category2
	   			v-else-if="module.template_code === 'category_2'"
	   			:data="module.data"
	   		/>

	   		<!-- 你可以继续添加更多类型的组件 -->
	   		<view v-else>
	   			<!-- 未知模块类型：{{ module.template_code }} -->
	   		</view>
	   	</template>
	   </view>
	   
	</view>
</template>

<script>
import TmpCategoryModule1 from '@/components/category/tmp-category-module-1.vue'



import TmpBannerIcon from '@/components/banner/tmp-banner-icon-1.vue'



export default {
	components: { TmpCategoryModule1, TmpBannerIcon },
	data() {
		return {
			//tablistTem: tablistTem,
			//tabList: tablistTem.map(item => ({ name: item.nav_name })),
			tabList: [],
			tabContent: [],
			searchValue: '',
			currentTab: 0,
			menuBaseUrl: 'https://cdn.uviewui.com/uview/menu/',
			menuList: [
				[
					{ icon: 'calendar', text: '课程', color: 'blue', iconColor: '#2468F2' },
					{ icon: 'list-dot', text: '话术', color: 'blue', iconColor: '#2468F2' },
					{ icon: 'integral', text: '会员', color: 'blue', iconColor: '#2468F2' },
					{ icon: 'kefu-ermai', text: '客服', color: 'blue', iconColor: '#2468F2' },
					{ icon: 'grid', text: '全部分类', color: 'blue', iconColor: '#2468F2' },
					{ icon: 'calendar', text: '情感大师', color: 'red', iconColor: '#F24D4D' },
					{ icon: 'list-dot', text: '话术', color: 'blue', iconColor: '#2468F2' },
					{ icon: 'integral', text: '会员', color: 'yellow', iconColor: '#F2C94C' },
					{ icon: 'kefu-ermai', text: '客服', color: 'blue', iconColor: '#2468F2' },
					{ icon: 'grid', text: '全部分类', color: 'blue', iconColor: '#2468F2' },
				]
			],
			menuArr2: [
				[{
						title: '天猫新品',
						image_url: '11.png'
					},
					{
						title: '今日爆款',
						image_url: '9.png'
					}, {
						title: '天猫国际',
						image_url: '17.png'
					}, {
						title: '饿了么',
						image_url: '6.png'
					}, {
						title: '天猫超市',
						image_url: '11.png'
					}, {
						title: '分类',
						image_url: '2.png'
					}, {
						title: '天猫美食',
						image_url: '3.png'
					}, {
						title: '阿里健康',
						image_url: '12.png'
					}, {
						title: '口碑生活',
						image_url: '7.png'
					}
				],
				[{
						title: '充值中心',
						image_url: '8.png'
					},
					{
						title: '机票酒店',
						image_url: '10.png'
					}, {
						title: '金币庄园',
						image_url: '18.png'
					}, {
						title: '阿里拍卖',
						image_url: '15.png'
					}, {
						title: '淘宝吃货',
						image_url: '16.png'
					}, {
						title: '闲鱼',
						image_url: '4.png'
					}, {
						title: '会员中心',
						image_url: '6.png'
					}, {
						title: '造点新货',
						image_url: '13.png'
					}, {
						title: '土货鲜食',
						image_url: '14.png'
					}
				]
			]
		}
	},
	onLoad() {
		this.getTabData()
	},
	methods: {
		getTabData() {
			uni.request({
				url: 'http://apiv2.course.com/api/nav/type',
				method: 'POST',
				data: { nav_type: 'home' },
				success: (res) => {
					//console.log(res.data.data);
					if (res.data && res.data.data) {
						this.tabList = res.data.data.items.map(item => ({ name: item.nav_name }))

						//console.log(this.tabList);

						this.tabContent = res.data.data.items
					}
				}
			})
		},
		onTabChange(index) {
			this.currentTab = index.index
			console.log('currentTab:' + index.index);
		}
	}
}
</script>

<style scoped lang="scss">

page{
	background-color: #ffffff;
}

.home-container {
	background: #ffffff;
	min-height: 100vh;
	padding-bottom: 40rpx;
	padding: 40rpx 15px ;
}
.search-box {
	//margin: 32rpx 24rpx 0 24rpx;
}

.menu-grid {
	margin: 32rpx 15px 24rpx 15px;
	background: #fff;
	border-radius: 24rpx;
	box-shadow: 0 4rpx 24rpx 0 rgba(36,104,242,0.04);
	padding: 24rpx 0;
}

.menu-item{
	margin:10px 0px;
	align-items: center;
	text-align: center;
}

.menu-icon {
	width: 72rpx;
	height: 72rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 8rpx auto;
	background: #f6f7fa;
	box-shadow: 0 4rpx 12rpx 0 rgba(36,104,242,0.08);
}
.menu-icon.blue { border: 2rpx solid #2468F2; }
.menu-icon.red { border: 2rpx solid #F24D4D; }
.menu-icon.yellow { border: 2rpx solid #F2C94C; }

.menu-text {
	font-size: 24rpx;
	color: #333;
	/* color: $uv-primary; */
	text-align: center;
	margin-top: 4rpx;

}

.box-main {
	padding: 40rpx 15px ;
}
	
</style>
